<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 
            ## 什么是作用域插槽？
                1. 在子组件里定义插槽，内容也由子组件提供
                2. 父组件可以替换插槽
                3. 父组件可以通过slot的data属性来获取子组件里的值

         -->
        <div id="app">
            <!-- 这里使用的是实例中的isShow变量 -->
            <cpn></cpn>
            <cpn>
                <!-- 这里使用了子组件的pLanguages属性
                    注意是怎么获取这个属性的！！！
                -->
                <template slot-scope="slot">
                    <span v-for="item in slot.data">{{item}} - </span>
                </template>
            </cpn>
            <cpn>
                <template slot-scope="slot">
                    <span v-for="item in slot.data">{{item}} * </span>
                </template>
            </cpn>
        </div>
        <template id="cpn">
            <div>
                <slot :data="pLanguages">
                    <ul>
                        <li v-for="item in pLanguages">{{item}}</li>
                    </ul>
                </slot>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            pLanguages: ['java', 'c', 'python', 'c++', 'c#']
                        }
                    },
                }
            }
        })
        </script>
    </body>
</html>